import React from 'react'
import './SurveyList.css'

function SurveyList({ surveys, loading, onView, onEdit, onDelete }) {
  if (loading) {
    return <div className="loading">加载中...</div>
  }

  if (surveys.length === 0) {
    return <div className="empty">暂无数据，点击右上角"新建表单"创建问卷</div>
  }

  return (
    <div className="survey-list">
      <table className="survey-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>公司名称</th>
            <th>姓名</th>
            <th>电话</th>
            <th>地址</th>
            <th>负责人</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {surveys.map((survey) => (
            <tr key={survey.id}>
              <td>{survey.id}</td>
              <td>{survey.company_name}</td>
              <td>{survey.name}</td>
              <td>{survey.phone}</td>
              <td className="address-cell">{survey.address}</td>
              <td>{survey.manager}</td>
              <td>{new Date(survey.created_at).toLocaleString('zh-CN')}</td>
              <td>
                <div className="action-buttons">
                  <button
                    className="btn btn-secondary btn-sm"
                    onClick={() => onView(survey)}
                  >
                    查看
                  </button>
                  <button
                    className="btn btn-warning btn-sm"
                    onClick={() => onEdit(survey)}
                  >
                    编辑
                  </button>
                  <button
                    className="btn btn-danger btn-sm"
                    onClick={() => onDelete(survey.id)}
                  >
                    删除
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default SurveyList
